<template>
	<view class="login">
		<image class="login__logo" src="/static/logo-main.png" mode="aspectFit"></image>
		<view class="login__form">
			<u-field class="login__form__input" v-model="phone" placeholder="手机号码" :label-width="0">
			</u-field>
			<u-field class="login__form__input" v-model="password" placeholder="密码" :label-width="0" :password="true">
			</u-field>
			<u-button class="login__form__button" type="primary" @click="login()">
				<view v-if="!loadding">登录</view>
				<u-loading v-else mode="circle"></u-loading>
			</u-button>
			<view class="login__form__func">

				<a @click="toForgetPassword">忘记密码？</a>
				<a @click="toRegister">注册</a>
			</view>
			<view class="login__tripartite">
				<u-divider fontSize="28" color="#333">第三方登录</u-divider>
				<view class="login__tripartite__content">
					<image class="login__tripartite__logo" src="/static/login/msg.svg" mode="aspectFit" @click="toLoginByMessage"></image>
					<image class="login__tripartite__logo" src="/static/login/qq.svg" mode="aspectFit"></image>
					<image class="login__tripartite__logo" src="/static/login/wechat.svg" mode="aspectFit"></image>
				</view>
			</view>
			<a class="login__notice">登录即视为您已同意<br />
				《云链智谷App使用协议》《用户隐私保护协议》内容</a>

		</view>
	</view>
</template>

<script>
	import  axios from "axios";
	export default {
		data() {
			return {
				phone: '',
				password: '',
				loginType:1,
				loadding:false,
			}
		},
		onLoad() {

		},
		onLoad() {

		},
		methods: {
			login() {
				if(this.loadding){
					return
				}
				this.loadding=true
				let loginData={
					"phone":this.phone,
					"password":this.password,
					"loginType":this.loginType,
				}
				console.log("test",this.$store.state.baseURL)
				
				axios({
					method:"post",
					url:this.$store.state.baseURL+"/user/login",
					data:loginData,
				}).then((response)=>{
					console.log("response",response)
					if(response.data.state=="success"){
						uni.setStorageSync("token",response.data.msg)
						console.log(uni.getStorageSync("token"))
						 // 测试
						 uni.switchTab({
						 	url:"/pages/core/index/index",
						 })
					}else{
						console.log(response.data)
						this.loadding=false
						uni.showToast({
							title: response.data.msg,
							icon:'none',
							duration: 2000
						});
					}
				}).catch(e=>{
					uni.showToast({
						title:e,
						icon:"none",
						duration:2000
					})
				})
				
			},
			toLoginByMessage(){
				this.$loginPopup()
				uni.navigateTo({
					url:"/pages/login/loginByPhoneCode"
				})
			},
			toForgetPassword(){
				uni.navigateTo({
					url:"/pages/login/forgetPasswordVerification"
				})
			},
			toRegister(){
				uni.navigateTo({
					url:"/pages/login/register"
				})		
			},

		}
	}
</script>
<style lang="scss" scoped>
	a {
		color: $uni-text-color-placeholder;
	}
</style>
<style lang="less" scoped>
	.login {
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: center;

		&__logo {
			height: 200rpx;
			margin-top: 100rpx;
			margin-left: auto;
			margin-right: auto;
			margin-bottom: 60rpx;
		}

		&__form {
			display: flex;
			flex-direction: column;
			justify-content: center;

			&__input {
				margin-bottom: 30rpx;
			}

			&__button {
				margin-top: 30rpx;
				margin-left: 0rpx;
				margin-right: 0rpx;
			}

			&__func {
				width: 100%;
				margin-top: 30rpx;
				display: flex;
				justify-content: space-between;
			}
		}

		&__tripartite {
			margin-top: 120rpx;

			&__content {
				margin-top: 30rpx;
				margin-bottom: 30rpx;
				display: flex;
				flex-direction: row;
				justify-content: center;
			}

			&__logo {
				width: 90rpx;
				height: 90rpx;
				margin-left: 50rpx;
				margin-right: 50rpx;
			}
		}

		&__notice {
			margin-top: 30rpx;
			text-align: center;
		}
	}
</style>
